

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
  .image-container {
    position: relative;
    width: 300px;
    height: 200px;
  }
  
  .image-container img {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
  
  .image-container img:first-child {
    opacity: 1;
  }
  
  .image-container:hover img:first-child {
    opacity: 0;
  }
  
  .image-container:hover img:last-child {
    opacity: 1;
  }
</style>
</head>
<body>

<div class="image-container">
  <img src="./OIP-C (1).jpg" alt="Image 1">
  <img src="./OIP-C (2).jpg" alt="Image 2">
</div>

</body>
</html>
